<template>
  <div>
    <h2 v-if="isShow">v-if条件渲染的基本使用</h2>
    <button @click="toggle">单击切换显示和隐藏内容</button>
    <hr />
    <h2>v-if多个条件的渲染</h2>
    <div>
      <input type="text" v-model="score" />
      <h2 v-if="score >= 90">优秀</h2>
      <h2 v-else-if="score >= 60">良好</h2>
      <h2 v-else>不及格</h2>
    </div>
    <h3>v-if和template结合使用</h3>
    <template v-if="isShow">
      <h3>v-if控制多个h3标签显示隐藏</h3>
      <h3>v-if控制多个h3标签显示隐藏</h3>
      <h3>v-if控制多个h3标签显示隐藏</h3>
    </template>
    <template v-else>
      <h4>v-if控制多个h4标签显示隐藏</h4>
      <h4>v-if控制多个h4标签显示隐藏</h4>
      <h4>v-if控制多个h4标签显示隐藏</h4>
    </template>
  </div>
</template>

<!-- <script>
export default {
  name: 'vif',
  data() {
    return {
      isShow: true,
      score: 95
    }
  },
  methods: {
    toggle() {
      this.isShow = !this.isShow
    }
  }
}
</script> -->
<script setup>
import { ref } from 'vue'
defineOptions({
  name: 'vif'
})
const isShow = ref(true)
const score = ref(10)
const toggle = () => {
  isShow.value = !isShow.value
}
</script>

<style lang="scss" scoped>
h3 {
  color: red;
}
h4 {
  color: green;
}
</style>
